<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="col-sm-12"> <ul class="navi"> <li><a href="#" title="">home</a></li> <li><a href="#" title="">about us</a></li> <li><a href="#" title="">our service</a></li> <li><a href="#" title="">contact us</a></li> <li><a href="#" title="">blog</a></li> <li><a href="#" title="">testimonials</a></li> <li><a href="#" title="">sitemap</a></li> <li><a href="#" title="">terms & condition</a></li> <div class="col-sm-12 li"></div> </ul> </div>

.navi { margin: 50px; padding: 0; background-color: #000; border-radius: 5px; height:50px; } .navi li{display: inline-block; -webkit-transition:1s;} .navi li a { margin: 0; display: inline-block; padding: 15px 32px 15px 35px !important; color: #fff; text-decoration: none; text-transform: uppercase; font-weight: bold; } .navi li a:hover { margin: 0; display: inline-block; padding: 15px 32px 15px 35px !important; color: #ffff00; text-decoration: none; text-transform: uppercase; font-weight: bold; } .li { margin:0; padding: 5px; -webkit-transition:0.5s; width:100px; background:red; } .navi li:hover:nth-child(1) ~ .li {margin:0 0 0 5px;} .navi li:hover:nth-child(2) ~ .li {margin:0 0 0 134px;} .navi li:hover:nth-child(3) ~ .li {margin:0 0 0 290px;} .navi li:hover:nth-child(4) ~ .li {margin:0 0 0 455px;} .navi li:hover:nth-child(5) ~ .li {margin:0 0 0 595px;} .navi li:hover:nth-child(6) ~ .li {margin:0 0 0 730px;} .navi li:hover:nth-child(7) ~ .li {margin:0 0 0 890px;} .navi li:hover:nth-child(8) ~ .li {margin:0 0 0 1070px;}